<template>
  <div class="app-container">
    <header class="app-header">
      <h1>实时抄表系统</h1>
    </header>
    <el-container class="home">

      <el-aside width="225px">
        <Sidebar :searchMeters="searchMeters" @selectType="filterByType" />
      </el-aside>


      <el-container class="main-content">
        <el-main>
          <router-view :meters="filteredMeters" />
        </el-main>
      </el-container>
      
    </el-container>
  </div>
</template>

<script>
import Sidebar from "../src/components/Sidebar.vue";
import SearchBar from "../src/components/SearchBar.vue";

import {
  getAllMeters,
  queryMeter,
  createMeter,
  createMonitor,
  updateMeterAlias,
  getMeterDetails,
  refreshDetails,
  getIncrement,
}
from '@/api/meter.js';

export default {
  name: 'Home',
  components: {
    Sidebar,
    SearchBar,
  },
  data() {
    return {
      meters: [],
      filteredMeters: [],
      currentType: 'Ammeter',
      editDialogVisible: false,
      detailDialogVisible: false,
      createDialogVisible: false,
      selectedMeter: {},
      times:'',
    };
  },
  methods: {
    searchMeters() {
      // 实现搜索逻辑
    },
    filterByType(type) {
      this.currentType = type;
      this.searchMeters();
    },

    async fetchAllMeters() {
      try {
        const data = await getAllMeters(this.currentType);
        this.meters = data;
        this.filteredMeters = [...this.meters];
      } catch {
        this.$message.error('获取数据失败');
      }
    },


    async updateAlias(newAlias) {
      try {
        await updateMeterAlias(this.selectedMeter.meterID, newAlias);
        const meter = this.meters.find(m => m.meterID === this.selectedMeter.meterID);
        if (meter) meter.alias = newAlias;
        this.filteredMeters = [...this.meters];
        this.$message.success('更新成功');
      } catch {
        this.$message.error('更新失败');
      } finally {
        this.editDialogVisible = false;
      }
    },

    async handleCreateMonitor({ meterID, mac }) {
      try {
        const newMonitor = await createMonitor(meterID, mac);
        const meter = this.meters.find(m => m.meterID === meterID);
        if (meter) {
          meter.monitors = meter.monitors || [];
          meter.monitors.push(newMonitor);
        }
        this.filteredMeters = [...this.meters];
        this.$message.success('创建监控成功');
      } catch {
        this.$message.error('创建监控失败');
      }
    },

    async handleCreateMeter(meterData) {
      try {
        const createdMeter = await createMeter(meterData.meterID, meterData.alias, meterData.type);
        this.meters.push({ ...createdMeter, AiRes: [], monitors: [] });
        this.filteredMeters = [...this.meters];
        this.$message.success('创建成功');
      } catch {
        this.$message.error('创建失败');
      } finally {
        this.createDialogVisible = false;
      }
    },
//获取表的详情数据
    async openDetailDialog(meter) {
      this.selectedMeter = { ...meter };
      console.log("details")
      try {
        const details = await getMeterDetails(meter.meterId,this.currentType);
        Object.assign(this.selectedMeter, details[0] || {});
        this.detailDialogVisible = true;
        console.log("详情数据details是",details)
        console.log("this.selectedMeter的数据是",this.selectedMeter)
      } catch {
        this.$message.error('获取详情失败');
        console.log("获取详情失败")
      }
    },
    // 使用 refreshDetails 函数刷新详细信息
    async  refreshDetailDialog(meter) {
      this.selectedMeter = { ...meter };
      try {
        const details = await refreshDetails(meter.meterID);
        // 假设返回的details是一个数组，取数组的第一个元素，如果没有元素则取一个空对象
        Object.assign(this.selectedMeter, details[0] || {});
        this.detailDialogVisible = true;
      } catch (error) {
        // 捕捉到错误时给出提示
        this.$message.error('刷新详情失败');
      }
    },
    updateFilteredMeters(data) {
      this.filteredMeters = data; // 更新过滤后的表数据
    },
  },

  mounted() {
    // 如果需要在组件挂载时执行其他操作，可以放在这里
  }
};
</script>

<style scoped>
.app-container {
  min-height: 100vh;
  background-color: #f0f2f5;
}

.app-header {
  background-color: #2657a1;
  padding: 16px 24px;
  color: white;
  text-align: center;
  font-size: 32px;
  height: 135px;
}

.home {
  display: flex;
  flex-direction: row;
  background-color: #f0f2f5;
}

.main-content {
  width: 100%;
  padding: 20px;
}

el-header {
  height: 150px;
  background-color: white;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
  margin-bottom: 20px;
}
</style>
